<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>YIX | 登录</title>
		<link rel="stylesheet" href="./style.css">
		<link rel="stylesheet" href="../layui/css/layui.css">
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../layui/layui.js"></script>
	</head>
	<body>
		<div
			style="position: fixed;left:0;top:0;width: 100px;height: 30px;background: #1991FA;border-radius: 0px 0px 20px 0px;text-align: center;line-height: 30px;">
			<a style="color:#fff;" href="/home">返回首页</a></div>
		<div class="panel">
			<div class="panel--wrapper">
				<div class="panel--box sign signin active">
					<a class="sign--link" href="#" id="signUp">
						注册
					</a>
					<div class="panel--header">
						<h2 class="panel--title">登录</h2>
					</div>
					<div class="panel--body">
						<div class="sign--input">
							<input type="text" id="username" placeholder="用户名"
								onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
								onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
								oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
						</div>
						<div class="sign--input">
							<input type="password" id="password" placeholder="密码"
								onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
								onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
								oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
						</div>
						<div>
							<div class="sign--checkbox">
								<input id="remember" name="remember" type="checkbox">
								<label for="remember"></label>记住我
							</div>
							<input class="sign--button right" type="submit" onclick="login()" value="登录">
							<div class="line"></div>
						</div>
						<div class="sign__forgot">
							<h3>
								忘记密码？
							</h3>
							<a href="#">点击这里</a>
							设置新密码。
						</div>
					</div>
				</div>
				<div class="panel--box sign signup">
					<a class="sign--link signup__link" href="/auth/signin" id="signIn">
						马上登录
					</a>
					<div class="panel--header">
						<h2 class="panel--title signup__title">注册</h2>
					</div>
					<form action="/home/mysql_php/demo_insert_user.php" method="post" onsubmit="return logon()"
						enctype="multipart/form-data">
						<div class="panel--body">
							<div class="sign--input">
								<input type="text" class="domain" name="logonname_admin" placeholder="姓名(不填默认使用用户名)">
							</div>
							<div class="sign--input">
								<input type="text" id="logonusername" name="username_admin" placeholder="*用户名"
									onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
									onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
									oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
							</div>
							<div class="sign--input">
								<input type="password" id="logonpassword" name="password_admin" placeholder="*密码"
									onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
									onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
									oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
							</div>
							<div class="sign--input">
								<input type="password" id="logonpassword2" placeholder="*确认密码"
									onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
									onpaste="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')"
									oncontextmenu="value=value.replace(/[^\a-\z\A-\Z0-9]/g,'')">
							</div>
							<div class="sign--input">
								<input type="text" id="logonemail" placeholder="*邮箱" name="email_admin">
							</div>
							<div class="sign--input" id="yzmdiv" style="display: flex;">
								<input type="button" id="yzm" value="注册账号验证" onclick="yz()"
									style="text-align: left;cursor: pointer;color: orangered;">
							</div>
							<div class="sign--input" id="yzmdiv" style="display: flex;">
								<input type="file" id="image" name="image">
							</div>
							<div class="panel--border-bottom">
								<div class="line"></div>
								<input class="sign--button sign--button--outline signup__button" type="submit"
									value="注册">
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script src="./script.js"></script>
	</body>
	<div id="yz" style="display: none;">
		<style>
			.block {
				position: absolute;
				left: 0;
				top: 0;
			}

			.sliderContainer {
				position: relative;
				text-align: center;
				width: 310px;
				height: 40px;
				line-height: 40px;
				margin-top: 15px;
				background: #f7f9fa;
				color: #45494c;
				border: 1px solid #e4e7eb;
			}

			.sliderContainer_active .slider {
				height: 38px;
				top: -1px;
				border: 1px solid #1991FA;
			}

			.sliderContainer_active .sliderMask {
				height: 38px;
				border-width: 1px;
			}

			.sliderContainer_success .slider {
				height: 38px;
				top: -1px;
				border: 1px solid #52CCBA;
				background-color: #52CCBA !important;
			}

			.sliderContainer_success .sliderMask {
				height: 38px;
				border: 1px solid #52CCBA;
				background-color: #D2F4EF;
			}

			.sliderContainer_success .sliderIcon {
				background-position: 0 0 !important;
			}

			.sliderContainer_fail .slider {
				height: 38px;
				top: -1px;
				border: 1px solid #f57a7a;
				background-color: #f57a7a !important;
			}

			.sliderContainer_fail .sliderMask {
				height: 38px;
				border: 1px solid #f57a7a;
				background-color: #fce1e1;
			}

			.sliderContainer_fail .sliderIcon {
				background-position: 0 -83px !important;
			}

			.sliderContainer_active .sliderText,
			.sliderContainer_success .sliderText,
			.sliderContainer_fail .sliderText {
				display: none;
			}

			.sliderMask {
				position: absolute;
				left: 0;
				top: 0;
				height: 40px;
				border: 0 solid #1991FA;
				background: #D1E9FE;
			}

			.slider {
				position: absolute;
				top: 0;
				left: 0;
				width: 40px;
				height: 40px;
				background: #fff;
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
				cursor: pointer;
				transition: background .2s linear;
			}

			.slider:hover {
				background: #1991FA;
			}

			.slider:hover .sliderIcon {
				background-position: 0 -13px;
			}

			.sliderIcon {
				position: absolute;
				top: 15px;
				left: 13px;
				width: 14px;
				height: 10px;
				background: url(../img/icon_light.f13cff3.png) 0 -26px;
				background-size: 34px 471px;
			}

			.refreshIcon {
				position: absolute;
				right: 0;
				top: 0;
				width: 34px;
				height: 34px;
				cursor: pointer;
				background: url(../img/icon_light.f13cff3.png) 0 -437px;
				background-size: 34px 471px;
			}
		</style>
		<div class="container">
			<div id="captcha" style="position: relative"></div>
			<div id="msg"></div>
		</div>
		<script>
			(function(window) {
				const l = 42, // 滑块边长
					r = 10, // 滑块半径
					w = 310, // canvas宽度
					h = 155, // canvas高度
					PI = Math.PI
				const L = l + r * 2 // 滑块实际边长

				function getRandomNumberByRange(start, end) {
					return Math.round(Math.random() * (end - start) + start)
				}

				function createCanvas(width, height) {
					const canvas = createElement('canvas')
					canvas.width = width
					canvas.height = height
					return canvas
				}

				function createImg(onload) {
					const img = createElement('img')
					img.crossOrigin = "Anonymous"
					img.onload = onload
					img.onerror = () => {
						img.src = getRandomImg()
					}
					img.src = getRandomImg()
					return img
				}

				function createElement(tagName) {
					return document.createElement(tagName)
				}

				function addClass(tag, className) {
					tag.classList.add(className)
				}

				function removeClass(tag, className) {
					tag.classList.remove(className)
				}

				function getRandomImg() {
					return 'https://picsum.photos/300/150/?image=' + getRandomNumberByRange(0, 100)
				}

				function draw(ctx, operation, x, y) {
					ctx.beginPath()
					ctx.moveTo(x, y)
					ctx.lineTo(x + l / 2, y)
					ctx.arc(x + l / 2, y - r + 2, r, 0, 2 * PI)
					ctx.lineTo(x + l / 2, y)
					ctx.lineTo(x + l, y)
					ctx.lineTo(x + l, y + l / 2)
					ctx.arc(x + l + r - 2, y + l / 2, r, 0, 2 * PI)
					ctx.lineTo(x + l, y + l / 2)
					ctx.lineTo(x + l, y + l)
					ctx.lineTo(x, y + l)
					ctx.lineTo(x, y)
					ctx.fillStyle = '#fff'
					ctx[operation]()
					ctx.beginPath()
					ctx.arc(x, y + l / 2, r, 1.5 * PI, 0.5 * PI)
					ctx.globalCompositeOperation = "xor"
					ctx.fill()
				}

				function sum(x, y) {
					return x + y
				}

				function square(x) {
					return x * x
				}

				class jigsaw {
					constructor(el, success, fail) {
						this.el = el
						this.success = success
						this.fail = fail
					}

					init() {
						this.initDOM()
						this.initImg()
						this.draw()
						this.bindEvents()
					}

					initDOM() {
						const canvas = createCanvas(w, h) // 画布
						const block = canvas.cloneNode(true) // 滑块
						const sliderContainer = createElement('div')
						const refreshIcon = createElement('div')
						const sliderMask = createElement('div')
						const slider = createElement('div')
						const sliderIcon = createElement('span')
						const text = createElement('span')

						block.className = 'block'
						sliderContainer.className = 'sliderContainer'
						refreshIcon.className = 'refreshIcon'
						sliderMask.className = 'sliderMask'
						slider.className = 'slider'
						sliderIcon.className = 'sliderIcon'
						text.innerHTML = '向右滑动滑块填充拼图'
						text.className = 'sliderText'

						const el = this.el
						el.appendChild(canvas)
						el.appendChild(refreshIcon)
						el.appendChild(block)
						slider.appendChild(sliderIcon)
						sliderMask.appendChild(slider)
						sliderContainer.appendChild(sliderMask)
						sliderContainer.appendChild(text)
						el.appendChild(sliderContainer)

						Object.assign(this, {
							canvas,
							block,
							sliderContainer,
							refreshIcon,
							slider,
							sliderMask,
							sliderIcon,
							text,
							canvasCtx: canvas.getContext('2d'),
							blockCtx: block.getContext('2d')
						})
					}

					initImg() {
						const img = createImg(() => {
							this.canvasCtx.drawImage(img, 0, 0, w, h)
							this.blockCtx.drawImage(img, 0, 0, w, h)
							const y = this.y - r * 2 + 2
							const ImageData = this.blockCtx.getImageData(this.x, y, L, L)
							this.block.width = L
							this.blockCtx.putImageData(ImageData, 0, y)
						})
						this.img = img
					}

					draw() {
						// 随机创建滑块的位置
						this.x = getRandomNumberByRange(L + 10, w - (L + 10))
						this.y = getRandomNumberByRange(10 + r * 2, h - (L + 10))
						draw(this.canvasCtx, 'fill', this.x, this.y)
						draw(this.blockCtx, 'clip', this.x, this.y)
					}

					clean() {
						this.canvasCtx.clearRect(0, 0, w, h)
						this.blockCtx.clearRect(0, 0, w, h)
						this.block.width = w
					}

					bindEvents() {
						this.el.onselectstart = () => false
						this.refreshIcon.onclick = () => {
							this.reset()
						}

						let originX, originY, trail = [],
							isMouseDown = false
						this.slider.addEventListener('mousedown', function(e) {
							originX = e.x, originY = e.y
							isMouseDown = true
						})
						document.addEventListener('mousemove', (e) => {
							if (!isMouseDown) return false
							const moveX = e.x - originX
							const moveY = e.y - originY
							if (moveX < 0 || moveX + 38 >= w) return false
							this.slider.style.left = moveX + 'px'
							var blockLeft = (w - 40 - 20) / (w - 40) * moveX
							this.block.style.left = blockLeft + 'px'

							addClass(this.sliderContainer, 'sliderContainer_active')
							this.sliderMask.style.width = moveX + 'px'
							trail.push(moveY)
						})
						document.addEventListener('mouseup', (e) => {
							if (!isMouseDown) return false
							isMouseDown = false
							if (e.x == originX) return false
							removeClass(this.sliderContainer, 'sliderContainer_active')
							this.trail = trail
							const {
								spliced,
								TuringTest
							} = this.verify()
							if (spliced) {
								if (TuringTest) {
									addClass(this.sliderContainer, 'sliderContainer_success')
									this.success && this.success()
								} else {
									addClass(this.sliderContainer, 'sliderContainer_fail')
									this.text.innerHTML = '再试一次'
									this.reset()
								}
							} else {
								addClass(this.sliderContainer, 'sliderContainer_fail')
								this.fail && this.fail()
								setTimeout(() => {
									this.reset()
								}, 1000)
							}
						})
					}

					verify() {
						const arr = this.trail // 拖动时y轴的移动距离
						const average = arr.reduce(sum) / arr.length // 平均值
						const deviations = arr.map(x => x - average) // 偏差数组
						const stddev = Math.sqrt(deviations.map(square).reduce(sum) / arr.length) // 标准差
						const left = parseInt(this.block.style.left)
						return {
							spliced: Math.abs(left - this.x) < 10,
							TuringTest: average !== stddev, // 只是简单的验证拖动轨迹，相等时一般为0，表示可能非人为操作
						}
					}

					reset() {
						this.sliderContainer.className = 'sliderContainer'
						this.slider.style.left = 0
						this.block.style.left = 0
						this.sliderMask.style.width = 0
						this.clean()
						this.img.src = getRandomImg()
						this.draw()
					}

				}

				window.jigsaw = {
					init: function(element, success, fail) {
						new jigsaw(element, success, fail).init()
					}
				}
			}(window))
		</script>
		<script type="text/javascript">
			jigsaw.init(document.getElementById('captcha'), function() {
				layer.closeAll();
				layui.use('layer', function() {
					var layer = layui.layer;
					layer.msg("验证成功");
					$("#yzm").css("color", "green");
					$("#yzmdiv").append(
						"<i class='layui-icon' style='line-height:60px;padding-right:20px;'>&#x1005;</i>");
					yzJudge = true;
				});
			})
		</script>

	</div>
</html>
<script>
	var yzJudge = false;

	function yz() {
		if (yzJudge) {
			layer.msg("当前已完成验证");
		} else {
			layer.open({
				type: 1,
				title: "注册账号验证",
				shadeClose: true,
				anim: 4,
				content: $('#yz')
			});
		}
	}

	function logon() {
		var logonname_user = $("#logonname").val();
		var username_user = $("#logonusername").val();
		var password_user = $("#logonpassword").val();
		var email_user = $("#logonemail").val();
		(logonname_user == "") ? logonname_user = username_user: logonname_user = logonname_user;
		if (username_user == "" || password_user == "" || email_user == "") {
			layer.msg("注册必填项(*号项)不能为空");
			return false;
		} else {
			if (yzJudge) {
				if ($("#image").val() != "") {
					if ($("#logonpassword").val() != $("#logonpassword2").val()) {
						layer.msg("两次输入的密码不一样");
						return false;
					} else {
						return true;
					}
				} else {
					layer.msg("头像未上传");
					return false;
				}
			} else {
				layer.msg("图形验证码未通过");
				return false;
			}
		}
	}

	function login() {
		var username_user = $("#username").val();
		var password_user = $("#password").val();
		var check = $("#remember");
		var checked = check[0].checked;
		if (username_user == "" || password_user == "") {
			layer.msg("账号密码不能为空");
		} else {
			$.ajax({
				url: "http://localhost:90/home/mysql_php/demo_select_judge_user.php",
				type: "POST",
				data: {
					username_admin: username_user,
					password_admin: password_user,
					check: checked
				},
				success: function(res) {
					$data = JSON.parse(res);
					layui.use('layer', function() {
						var layer = layui.layer;
						layer.msg($data["msg"]);
					});
					if ($data["status"] != 0) {
						document.body.innerHTML += `<meta http-equiv="refresh" content="1;url=/home">`;
					}
				}
			})
		}
	}
</script>
